---
import cfg from "blog.config";
import GetCurrentPageSetting from "@/utils/GetCurrentPageSetting";
import RightMenu from "./RightMenu/index.astro";
import RightMenuMobile from "./RightMenu/mobile.astro";
export interface Props {
  PositionTitle?: string;
}

const { header } = GetCurrentPageSetting(Astro.url),
  { PositionTitle } = Astro.props,
  KeepBGColor = header!.keepBackgroundColor,
  Pos = PositionTitle ? PositionTitle : "",
  {
    WebsiteSettings: { title },
  } = cfg;
---

<header>
  <div class={`wrapper ${KeepBGColor ? "keep_bg" : ""} `}>
    <div class="full_item full_title text_nowrap">{Pos + title}</div>
    <div class="full_item list">
      <div class="title">{title}</div>
      <RightMenu />
      <RightMenuMobile />
    </div>
  </div>
</header>

<style lang="scss">
  header {
    z-index: 1000;
    position: fixed;
    top: 0;
    width: 100%;
    height: 4rem;
    color: var(--text-default);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
      0 2px 10px 0 rgba(0, 0, 0, 0.12);

    .wrapper {
      position: relative;
      transition: transform 0.5s, background-color 0.5s;
      background-color: var(--background-default);

      &:hover,
      &.show_menu {
        .full_item.list {
          transform: translateY(0);
        }
      }

      .full_item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 4rem;
        padding: 0 10rem;

        &.full_title {
          justify-content: center;
          font-size: 1.4rem;
          font-weight: 700;
        }

        &.list {
          position: absolute;
          top: 0;
          left: 0;
          background-color: var(--background-default);
          transform: translateY(-100%);
          transition: transform 0.3s;
        }

        .title {
          font-size: 1.2rem;
          font-weight: 700;
        }
      }
    }
  }

  @media screen and (max-width: 992px) {
    header {
      .wrapper {
        transform: translateY(0);

        .full_item {
          position: relative;
          justify-content: center;
          padding: 0;

          .title {
            z-index: 900;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            transition: transform 0.5s;
            background-color: var(--background-default);
          }

          &.list {
            transform: translateY(0);
          }
        }
      }
    }
  }
</style>
